<template>
  <div class="Index-box">
    <div class="situationOfstudentsT-box">
      <!-- 公用title -->
      <div class="tiTletopBox">
        <div class="Title overallSituationTitle">学生总体情况</div>
        <div class="tiTletopBoxz"></div>
        <div class="tiTletopBoxz1">
          <div>下次更新时间</div>
          <div>2024-12-12</div>
        </div>
        <div class="tiTletopBoxdetails" @click="addXsztqk">详情</div>
        <div class="tiTletopBoxTubiao"></div>
      </div>
      <div class="TeacherInformation1-box">
        <div class="jsrs">学生总数</div>
        <div class="kapianBox">
          <div class="kapianBoxItem">1</div>
          <div class="kapianBoxItem">2</div>
          <div class="kapianBoxItem">2</div>
          <div class="kapianBoxItem">2</div>
        </div>
      </div>
      <div class="situationOfstudentsT-Z">
        <barChartEcharts :barChartList="barChartList" />
      </div>
      <div class="situationOfstudentsT-B">
        <div class="BgImageBox"></div>
        <pieChartEcahrts :pieChartObj="pieChartObj" />
      </div>
    </div>
    <div class="situationOfstudentsB-box">
      <!-- 公用title -->
      <div class="tiTletopBox">
        <div class="Title overallSituationTitle">人员情况</div>
        <div class="tiTletopBoxz">
          <div>下次更新时间</div>
          <div>2024-12-12</div>
        </div>
      </div>
      <div class="situationOfstudentsT-Z">
        <barChartEcharts :barChartList="barChartList1" />
      </div>
      <div class="situationOfstudentsT-J">
        <!-- 3d饼图 -->
        <!-- <pyramidEcharts :pyramidList="pyramidList" /> -->
        <BingtuEcahrts :BingtuObj="BingtuObj" />
      </div>
    </div>
  </div>
</template>
<script setup>
import barChartEcharts from "@/components/barChartEcharts.vue"
import pieChartEcahrts from "@/components/pieChartEcahrtsgongyong.vue"
import pyramidEcharts from "@/components/pyramidEcharts.vue"
import BingtuEcahrts from "@/components/BingtuEcahrts.vue"
import { ue4 } from "@/utils/unrealJs"
// 学生总体情况详情
const addXsztqk = () => {
  ue4("XsOverallSituationDetails", { isClose: true })
}
const BingtuObj = ref({
  data: [
    {
      name: "性能测试",
      value: 100
      // itemStyle: {
      //   color: "rgba(69, 244, 245,  0.9)"
      // }
    },
    {
      name: "安全",
      value: 100
      // itemStyle: {
      //   color: "rgba(7, 166, 255,  0.5)"
      // }
    },
    {
      name: "功能",
      value: 57
      // itemStyle: {
      //   color: "#2acf81"
      // }
    },
    {
      name: "易用性",
      value: 51
      // itemStyle: {
      //   color: "#1F9AA7"
      // }
    },
    {
      name: "代码",
      value: 11
      // itemStyle: {
      //   color: "#F5B64C"
      // }
    },
    {
      name: "一年级",
      value: 100
    },
    {
      name: "二年级",
      value: 100
    },
    {
      name: "三年级",
      value: 100
    },
    {
      name: "四年级",
      value: 100
    },
    {
      name: "五年级",
      value: 100
    },
    {
      name: "六年级",
      value: 100
    },
    {
      name: "初一",
      value: 100
    },
    {
      name: "初二",
      value: 100
    },
    {
      name: "初三",
      value: 100
    }
  ],
  kuandu: 0.8, //饼图的宽度
  boxWidth: 160, //大小
  boxDepth: 160, //大小
  boxHeight: 40 //高度
})
const pieChartObj = ref({
  radius: ["40%", "60%"],
  center: ["25%", "50%"],
  danwei: "千米/小时",
  pieChartList: [
    {
      value: 100,
      name: "现有学校",
      age: 18
    },
    { value: 80, name: "在建学校", age: 18 },
    { value: 60, name: "带规划学校", age: 18 }
  ]
})
const barChartList = ref({
  xData: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"],
  seriesObj: {
    教师详情: [10, 20, 30, 40, 50, 60]
  },
  // 从浅到深(先量上面再量下面)
  colorList: {
    教师详情: ["rgba(66, 165, 245)", "rgba(68, 217, 253)"]
  },
  danwei: "单位(人)",
  isShowlegend: false,
  labelShow: true
})
const barChartList1 = ref({
  xData: ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级"],
  seriesObj: {
    教师详情: [10, 20, 30, 40, 50, 60]
  },
  // 从浅到深(先量上面再量下面)
  colorList: {
    教师详情: ["rgba(66, 165, 245)", "rgba(68, 217, 253)"]
  },
  danwei: "单位(人)",
  isShowlegend: false
  // labelShow: true
})
</script>
<style scoped lang="less">
.situationOfstudentsT-box {
  width: 100%;
  height: 450px;
  background: url("@/assets/situationOfstudents/XXC_XSZTQK@2x.png") no-repeat
    center;
  background-size: 100% 100%;
}
.situationOfstudentsB-box {
  margin-top: 10px;
  width: 100%;
  height: 508px;
  background: url("@/assets/situationOfstudents/XXC_RYQK@2x.png") no-repeat
    center;
  background-size: 100% 100%;
}
.TeacherInformation1-box {
  margin: auto;
  margin-top: 10px;
  width: 376px;
  height: 38px;
  background: url("@/assets/situationOfstudents/BJ_XSZS@2x.png") no-repeat
    center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  .jsrs {
    font-size: 12px;
    margin-left: 75px;
    width: 50px;
    height: 20px;
    line-height: 20px;
    color: #ffffff;
    // background-color: red;
  }
  .kapianBox {
    width: 180px;
    height: 25px;
    line-height: 25px;
    display: flex;
    flex-direction: row-reverse; /* 设置主轴方向为从右到左 */
    .kapianBoxItem {
      margin-right: 2px;
      width: 20px;
      line-height: 25px;
      text-align: center;
      height: 25px;
      color: #fff;
      font-size: 18px;
      background-color: pink;
      background: url("@/assets/TeacherInformation/xiaokuang.svg") no-repeat
        center;
      background-size: 100% 100%;
    }
  }
}
.situationOfstudentsT-Z {
  width: 100%;
  height: 180px;
}
.situationOfstudentsT-B {
  width: 100%;
  height: 160px;
  position: relative;
  .BgImageBox {
    position: absolute;
    left: 11%;
    top: 15%;
    width: 112px;
    height: 112px;
    // background-color: red;
    background: url("@/assets/Left/Plan/HUANXINGTUWAIKUANG@2x.png") no-repeat
      center;
    background-size: 100% 100%;
  }
}
.situationOfstudentsT-Z {
  width: 100%;
  height: 180px;
}
.situationOfstudentsT-J {
  margin-top: 20px;
  width: 100%;
  height: 250px;
  position: relative;
}
</style>
